<template>
  <view class="growth-container">
    <!-- 状态栏占位符 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 返回按钮 -->
    <view class="back-button" @tap="goBack">
      <view class="back-button-inner">
        <text class="back-icon">↩</text>
        <text class="back-text">返回</text>
      </view>
      <view class="back-button-glow"></view>
    </view>
    
    <!-- 标题 -->
    <view class="page-title">
      <text>{{ pageTitle }}</text>
    </view>
    
    <!-- 列表模式 -->
    <view v-if="currentMode === 'list'" class="growth-list-container">
      <!-- 添加记录按钮 -->
      <view class="add-record-btn" @tap="switchToAddMode">
        <text class="add-icon">+</text>
        <text class="add-text">添加成长记录</text>
      </view>
      
      <!-- 记录列表 -->
      <view v-if="growthRecords.length > 0" class="record-list">
        <view 
          class="record-item" 
          v-for="(record, index) in growthRecords" 
          :key="index"
          @tap="viewRecord(record)"
        >
          <view class="record-date">
            <text class="record-day">{{ formatDay(record.date) }}</text>
            <text class="record-month">{{ formatMonth(record.date) }}</text>
          </view>
          <view class="record-content">
            <text class="record-title">{{ record.title }}</text>
            <text class="record-desc">{{ record.description }}</text>
            <view class="record-stats">
              <text class="record-stat">身高: {{ record.height }}cm</text>
              <text class="record-stat">体重: {{ record.weight }}kg</text>
              <text v-if="record.head" class="record-stat">头围: {{ record.head }}cm</text>
            </view>
          </view>
          <text class="record-arrow">→</text>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-record">
        <image class="empty-image" src="/static/empty-growth.png" mode="aspectFit"></image>
        <text class="empty-text">暂无成长记录</text>
        <text class="empty-desc">记录宝宝成长的每一个重要时刻</text>
      </view>
    </view>
    
    <!-- 添加/编辑模式 -->
    <view v-else-if="currentMode === 'add' || currentMode === 'edit'" class="growth-form-container">
      <view class="form-section">
        <view class="form-item">
          <text class="form-label required">记录日期</text>
          <view class="date-picker" @tap="showDatePicker = true">
            <text class="selected-date">{{ formData.date }}</text>
            <text class="date-arrow">▼</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label required">标题</text>
          <input 
            class="form-input" 
            placeholder="给记录起个标题，如：6个月体检" 
            v-model="formData.title"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">描述</text>
          <textarea 
            class="form-textarea" 
            placeholder="描述一下本次记录的详情" 
            v-model="formData.description"
          />
        </view>
      </view>
      
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">身体数据</text>
        </view>
        
        <view class="form-item">
          <text class="form-label required">身高 (cm)</text>
          <input 
            class="form-input" 
            placeholder="请输入身高" 
            v-model="formData.height"
            type="digit"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label required">体重 (kg)</text>
          <input 
            class="form-input" 
            placeholder="请输入体重" 
            v-model="formData.weight"
            type="digit"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">头围 (cm)</text>
          <input 
            class="form-input" 
            placeholder="请输入头围" 
            v-model="formData.head"
            type="digit"
          />
        </view>
      </view>
      
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">照片记录</text>
        </view>
        
        <view class="photo-list">
          <view 
            class="photo-item" 
            v-for="(photo, index) in formData.photos" 
            :key="index"
          >
            <image class="photo-image" :src="photo" mode="aspectFill"></image>
            <view class="delete-photo" @tap="deletePhoto(index)">×</view>
          </view>
          
          <view class="add-photo" @tap="chooseImage" v-if="formData.photos.length < 4">
            <text class="add-photo-icon">+</text>
            <text class="add-photo-text">添加照片</text>
          </view>
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="footer">
        <button class="cancel-btn" @tap="cancelEdit">取消</button>
        <button class="save-btn" @tap="saveRecord">保存</button>
      </view>
    </view>
    
    <!-- 查看模式 -->
    <view v-else-if="currentMode === 'view'" class="growth-view-container">
      <view class="view-header">
        <view class="view-date">
          <text class="view-date-value">{{ formData.date }}</text>
        </view>
        <text class="view-title">{{ formData.title }}</text>
      </view>
      
      <view class="view-section">
        <view class="view-desc">
          <text>{{ formData.description || '无描述' }}</text>
        </view>
      </view>
      
      <view class="view-section">
        <view class="section-header">
          <text class="section-title">身体数据</text>
        </view>
        
        <view class="view-stats">
          <view class="view-stat-item">
            <text class="stat-value">{{ formData.height }}</text>
            <text class="stat-unit">cm</text>
            <text class="stat-label">身高</text>
          </view>
          <view class="view-stat-item">
            <text class="stat-value">{{ formData.weight }}</text>
            <text class="stat-unit">kg</text>
            <text class="stat-label">体重</text>
          </view>
          <view class="view-stat-item" v-if="formData.head">
            <text class="stat-value">{{ formData.head }}</text>
            <text class="stat-unit">cm</text>
            <text class="stat-label">头围</text>
          </view>
        </view>
      </view>
      
      <view class="view-section" v-if="formData.photos && formData.photos.length > 0">
        <view class="section-header">
          <text class="section-title">照片记录</text>
        </view>
        
        <view class="view-photos">
          <image 
            v-for="(photo, index) in formData.photos"
            :key="index"
            :src="photo"
            class="view-photo"
            mode="aspectFill"
            @tap="previewImage(photo)"
          ></image>
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="footer">
        <button class="delete-btn" @tap="confirmDelete">删除</button>
        <button class="edit-btn" @tap="switchToEditMode">编辑</button>
      </view>
    </view>
    
    <!-- 日期选择器弹窗 -->
    <view class="date-picker-modal" v-if="showDatePicker">
      <view class="date-picker-mask" @tap="showDatePicker = false"></view>
      <view class="date-picker-content">
        <view class="picker-header">
          <text @tap="showDatePicker = false">取消</text>
          <text>选择日期</text>
          <text @tap="confirmDate">确定</text>
        </view>
        <picker-view 
          class="date-picker-view" 
          :indicator-style="'height: 50px;'" 
          :value="datePickerValue"
          @change="datePickerChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(year, index) in years" :key="'year-' + index">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(month, index) in months" :key="'month-' + index">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(day, index) in days" :key="'day-' + index">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 获取状态栏高度
const statusBarHeight = ref(20);

// 页面模式：列表(list)、添加(add)、编辑(edit)、查看(view)
const currentMode = ref('list');

// 页面标题
const pageTitle = computed(() => {
  switch (currentMode.value) {
    case 'add': return '添加成长记录';
    case 'edit': return '编辑成长记录';
    case 'view': return '成长详情';
    default: return '成长记录';
  }
});

// 成长记录列表
const growthRecords = ref([]);

// 表单数据
const formData = reactive({
  id: '',
  date: formatDateString(new Date()),
  title: '',
  description: '',
  height: '',
  weight: '',
  head: '',
  photos: []
});

// 当前编辑的记录索引
const currentIndex = ref(-1);

// 日期选择器相关
const showDatePicker = ref(false);
const datePickerValue = ref([0, 0, 0]);
const tempDate = ref({ year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() });

// 构建年月日选项
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 5 }, (_, i) => currentYear - i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const days = computed(() => {
  const daysInMonth = new Date(tempDate.value.year, tempDate.value.month, 0).getDate();
  return Array.from({ length: daysInMonth }, (_, i) => i + 1);
});

// 格式化日期函数
function formatDateString(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const formatDay = (dateStr) => {
  const date = new Date(dateStr);
  return date.getDate();
};

const formatMonth = (dateStr) => {
  const date = new Date(dateStr);
  return `${date.getMonth() + 1}月`;
};

// 日期选择器变更
const datePickerChange = (e) => {
  const values = e.detail.value;
  tempDate.value.year = years[values[0]];
  tempDate.value.month = months[values[1]];
  tempDate.value.day = days.value[values[2]] || 1;
  
  datePickerValue.value = values;
};

// 确认日期选择
const confirmDate = () => {
  formData.date = `${tempDate.value.year}-${tempDate.value.month.toString().padStart(2, '0')}-${tempDate.value.day.toString().padStart(2, '0')}`;
  showDatePicker.value = false;
};

// 切换到添加模式
const switchToAddMode = () => {
  // 重置表单
  Object.assign(formData, {
    id: generateId(),
    date: formatDateString(new Date()),
    title: '',
    description: '',
    height: '',
    weight: '',
    head: '',
    photos: []
  });
  
  // 设置日期选择器初始值
  const today = new Date();
  const yearIndex = years.findIndex(y => y === today.getFullYear());
  const monthIndex = today.getMonth();
  const dayIndex = today.getDate() - 1;
  
  datePickerValue.value = [
    yearIndex >= 0 ? yearIndex : 0,
    monthIndex,
    dayIndex
  ];
  
  tempDate.value = {
    year: today.getFullYear(),
    month: today.getMonth() + 1,
    day: today.getDate()
  };
  
  currentMode.value = 'add';
};

// 切换到编辑模式
const switchToEditMode = () => {
  currentMode.value = 'edit';
};

// 查看记录详情
const viewRecord = (record) => {
  // 查找当前记录索引
  currentIndex.value = growthRecords.value.findIndex(item => item.id === record.id);
  
  // 复制记录数据到表单
  Object.assign(formData, JSON.parse(JSON.stringify(record)));
  
  // 设置日期选择器初始值
  if (formData.date) {
    const parts = formData.date.split('-');
    const year = parseInt(parts[0]);
    const month = parseInt(parts[1]);
    const day = parseInt(parts[2]);
    
    tempDate.value = { year, month, day };
    
    const yearIndex = years.findIndex(y => y === year);
    const monthIndex = months.findIndex(m => m === month);
    const dayIndex = days.value.findIndex(d => d === day);
    
    datePickerValue.value = [
      yearIndex >= 0 ? yearIndex : 0,
      monthIndex >= 0 ? monthIndex : 0,
      dayIndex >= 0 ? dayIndex : 0
    ];
  }
  
  currentMode.value = 'view';
};

// 取消编辑
const cancelEdit = () => {
  if (currentMode.value === 'edit') {
    currentMode.value = 'view';
  } else {
    currentMode.value = 'list';
  }
};

// 检查必填项
const validateForm = () => {
  if (!formData.date) {
    uni.showToast({
      title: '请选择记录日期',
      icon: 'none'
    });
    return false;
  }
  
  if (!formData.title.trim()) {
    uni.showToast({
      title: '请输入记录标题',
      icon: 'none'
    });
    return false;
  }
  
  if (!formData.height.trim()) {
    uni.showToast({
      title: '请输入身高',
      icon: 'none'
    });
    return false;
  }
  
  if (!formData.weight.trim()) {
    uni.showToast({
      title: '请输入体重',
      icon: 'none'
    });
    return false;
  }
  
  return true;
};

// 生成唯一ID
const generateId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substring(2);
};

// 保存记录
const saveRecord = () => {
  if (!validateForm()) return;
  
  // 克隆当前表单数据
  const recordData = JSON.parse(JSON.stringify(formData));
  
  // 加载现有记录
  let records = [];
  const storedRecords = uni.getStorageSync('growthRecords');
  if (storedRecords) {
    records = JSON.parse(storedRecords);
  }
  
  if (currentMode.value === 'edit' && currentIndex.value >= 0) {
    // 更新现有记录
    records[currentIndex.value] = recordData;
  } else {
    // 添加新记录
    records.push(recordData);
  }
  
  // 按日期排序（新的在前）
  records.sort((a, b) => new Date(b.date) - new Date(a.date));
  
  // 保存到本地存储
  uni.setStorageSync('growthRecords', JSON.stringify(records));
  growthRecords.value = records;
  
  // 更新宝宝基本信息中的身高体重
  updateBabyInfo(recordData);
  
  uni.showToast({
    title: '保存成功',
    icon: 'success',
    success: () => {
      setTimeout(() => {
        currentMode.value = 'list';
      }, 1500);
    }
  });
};

// 更新宝宝基本信息
const updateBabyInfo = (record) => {
  const storedBabyInfo = uni.getStorageSync('babyInfo');
  if (storedBabyInfo) {
    const babyInfo = JSON.parse(storedBabyInfo);
    // 仅当记录日期是最新的时候，才更新基本信息
    if (!growthRecords.value.length || new Date(record.date) >= new Date(growthRecords.value[0].date)) {
      babyInfo.height = record.height;
      babyInfo.weight = record.weight;
      if (record.head) {
        babyInfo.head = record.head;
      }
      uni.setStorageSync('babyInfo', JSON.stringify(babyInfo));
    }
  }
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 4 - formData.photos.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      formData.photos = [...formData.photos, ...res.tempFilePaths];
    }
  });
};

// 删除照片
const deletePhoto = (index) => {
  formData.photos.splice(index, 1);
};

// 预览图片
const previewImage = (current) => {
  uni.previewImage({
    urls: formData.photos,
    current
  });
};

// 确认删除
const confirmDelete = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除此成长记录吗？',
    success: (res) => {
      if (res.confirm && currentIndex.value >= 0) {
        // 加载现有记录
        let records = [];
        const storedRecords = uni.getStorageSync('growthRecords');
        if (storedRecords) {
          records = JSON.parse(storedRecords);
        }
        
        // 删除记录
        records.splice(currentIndex.value, 1);
        
        // 保存到本地存储
        uni.setStorageSync('growthRecords', JSON.stringify(records));
        growthRecords.value = records;
        
        uni.showToast({
          title: '已删除',
          icon: 'success',
          success: () => {
            setTimeout(() => {
              currentMode.value = 'list';
            }, 1500);
          }
        });
      }
    }
  });
};

// 返回函数
const goBack = () => {
  if (currentMode.value !== 'list') {
    currentMode.value = 'list';
  } else {
    uni.navigateBack({
      fail: () => {
        uni.navigateTo({
          url: '/auntMom/pages/home/home'
        });
      }
    });
  }
};

// 页面加载
onMounted(() => {
  // 获取状态栏高度
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
    }
  });
  
  // 加载成长记录
  const storedRecords = uni.getStorageSync('growthRecords');
  if (storedRecords) {
    growthRecords.value = JSON.parse(storedRecords);
  }
  
  // 检查是否是查看模式
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage && currentPage.options) {
    const { mode, id } = currentPage.options;
    
    if (mode === 'view' && id) {
      // 查找对应记录
      const record = growthRecords.value.find(item => item.id === id);
      if (record) {
        viewRecord(record);
      }
    }
  }
});
</script>

<style lang="scss" scoped>
.growth-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 50%, #f5faff 100%);
  padding-top: 90rpx;
  position: relative;
}

.status-bar {
  width: 100%;
  background-color: transparent;
}

.back-button {
  position: fixed;
  top: 60rpx;
  left: 24rpx;
  z-index: 100;
  transition: all 0.3s;
  
  .back-button-inner {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    color: #fff;
    padding: 12rpx 24rpx;
    border-radius: 40rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.96);
      box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
    }
  }
  
  .back-icon {
    font-size: 32rpx;
    margin-right: 6rpx;
  }
  
  .back-text {
    font-size: 24rpx;
    font-weight: 500;
  }
  
  .back-button-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    border-radius: 40rpx;
    opacity: 0.4;
    filter: blur(20rpx);
    z-index: -1;
    transform: scale(0.8);
  }
}

.page-title {
  text-align: center;
  padding: 16rpx 0 30rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.growth-list-container {
  padding: 0 24rpx 24rpx;
  
  .add-record-btn {
    height: 80rpx;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
    
    .add-icon {
      font-size: 36rpx;
      color: #fff;
      margin-right: 8rpx;
    }
    
    .add-text {
      font-size: 28rpx;
      color: #fff;
      font-weight: 500;
    }
  }
  
  .record-list {
    .record-item {
      background-color: #fff;
      border-radius: 14rpx;
      padding: 16rpx;
      display: flex;
      margin-bottom: 16rpx;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s;
      
      &:active {
        transform: scale(0.98);
      }
      
      .record-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 70rpx;
        margin-right: 16rpx;
        
        .record-day {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .record-month {
          font-size: 20rpx;
          color: #999;
        }
      }
      
      .record-content {
        flex: 1;
        
        .record-title {
          font-size: 26rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 4rpx;
        }
        
        .record-desc {
          font-size: 22rpx;
          color: #666;
          margin-bottom: 8rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .record-stats {
          display: flex;
          flex-wrap: wrap;
          gap: 10rpx;
          
          .record-stat {
            font-size: 20rpx;
            color: #999;
            background-color: #f5f5f5;
            padding: 2rpx 10rpx;
            border-radius: 6rpx;
          }
        }
      }
      
      .record-arrow {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 24rpx;
      }
    }
  }
  
  .empty-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    background-color: #fff;
    border-radius: 14rpx;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 16rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
      font-weight: 500;
      margin-bottom: 8rpx;
    }
    
    .empty-desc {
      font-size: 22rpx;
      color: #bbb;
    }
  }
}

.growth-form-container, .growth-view-container {
  padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 130rpx);
}

.form-section {
  background-color: #fff;
  border-radius: 14rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .section-header {
    margin-bottom: 16rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      display: block;
    }
  }
  
  .form-item {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .form-label {
      font-size: 26rpx;
      color: #333;
      margin-bottom: 8rpx;
      display: block;
      
      &.required:after {
        content: "*";
        color: #f5222d;
        margin-left: 6rpx;
      }
    }
    
    .form-input {
      width: 100%;
      height: 70rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 0 16rpx;
      font-size: 26rpx;
      color: #333;
      box-sizing: border-box;
    }
    
    .form-textarea {
      width: 100%;
      height: 140rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 16rpx;
      font-size: 26rpx;
      color: #333;
      box-sizing: border-box;
    }
    
    .date-picker {
      width: 100%;
      height: 70rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      
      .selected-date {
        font-size: 26rpx;
        color: #333;
      }
      
      .date-arrow {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
  
  .photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    
    .photo-item, .add-photo {
      width: calc((100% - 48rpx) / 4);
      height: 130rpx;
      border-radius: 8rpx;
      overflow: hidden;
    }
    
    .photo-item {
      position: relative;
      
      .photo-image {
        width: 100%;
        height: 100%;
      }
      
      .delete-photo {
        position: absolute;
        top: 4rpx;
        right: 4rpx;
        width: 32rpx;
        height: 32rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22rpx;
      }
    }
    
    .add-photo {
      background-color: #f5f7fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .add-photo-icon {
        font-size: 36rpx;
        color: #999;
        margin-bottom: 4rpx;
      }
      
      .add-photo-text {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}

.view-header {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .view-date {
    margin-bottom: 20rpx;
    
    .view-date-value {
      font-size: 26rpx;
      color: #999;
      background-color: #f5f7fa;
      padding: 6rpx 16rpx;
      border-radius: 6rpx;
    }
  }
  
  .view-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.view-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    margin-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
    padding-bottom: 16rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .view-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
  
  .view-stats {
    display: flex;
    justify-content: space-around;
    
    .view-stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .stat-value {
        font-size: 40rpx;
        font-weight: bold;
        color: #1890ff;
      }
      
      .stat-unit {
        font-size: 22rpx;
        color: #999;
        margin-bottom: 6rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .view-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .view-photo {
      width: calc((100% - 20rpx) / 2);
      height: 240rpx;
      border-radius: 10rpx;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx calc(env(safe-area-inset-bottom) + 20rpx);
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 20rpx;
  
  .cancel-btn, .delete-btn {
    flex: 1;
    height: 90rpx;
    background-color: #fff;
    color: #999;
    border: 2rpx solid #ddd;
    border-radius: 45rpx;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 90rpx;
  }
  
  .save-btn, .edit-btn {
    flex: 2;
    height: 90rpx;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    color: #fff;
    border-radius: 45rpx;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 90rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
  }
  
  .delete-btn {
    color: #f5222d;
    border-color: #f5222d;
  }
}

.date-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  
  .date-picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .date-picker-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
    
    .picker-header {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      text {
        font-size: 28rpx;
        
        &:first-child {
          color: #999;
        }
        
        &:nth-child(2) {
          font-weight: bold;
          color: #333;
        }
        
        &:last-child {
          color: #1890ff;
          font-weight: 500;
        }
      }
    }
    
    .date-picker-view {
      width: 100%;
      height: 400rpx;
    }
    
    .picker-item {
      line-height: 50px;
      text-align: center;
      font-size: 28rpx;
    }
  }
}
</style> 